/*
* @name: 订单管理
* @Author: along
*/
<template>
    <div class="container goods-container">
        <div class="search-tabbar">
            <el-tabs
                v-model="shop_type"
                @tab-click="fnGetShopTypeList()"
            >
                <el-tab-pane
                    label="自营店铺"
                    name="0"
                />
                <el-tab-pane
                    label="其他淘客"
                    name="2"
                />
            </el-tabs>
            <!--            <el-radio-group
                v-model="shop_type"
                @change="fnGetShopTypeList()"
                size="small"
            >
                <el-radio-button label="0">自营</el-radio-button>
                &lt;!&ndash; <el-radio-button label="1">商圈</el-radio-button> &ndash;&gt;
                <el-radio-button label="2">淘客</el-radio-button>
            </el-radio-group>-->
        </div>

        <!-- 自营header -->
        <div
            class="search-bar"
            v-if=" shop_type == '0' "
        >
            <div class="right">
                <div class="input-unit">
                    <div class="lable">
                        商品名称
                    </div>
                    <el-input
                        placeholder="请输入商品名称"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.goods_title"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单编号
                    </div>
                    <el-input
                        placeholder="请输入订单编号"
                        class="input-unit-input"
                        size="small"
                        v-model="shop_no"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        用户信息
                    </div>
                    <el-input
                        placeholder="请输入注册用户姓名、注册用户手机号、用户编号"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.user_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        店铺名称
                    </div>
                    <el-input
                        placeholder="请输入店铺编号"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.shop_title"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        上级精英
                    </div>
                    <el-input
                        placeholder="请输入精英姓名手机号或邀请码"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.rebate_stuagent_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单类型
                    </div>
                    <el-select
                        v-model="filterData.type"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in typeTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单标签
                    </div>
                    <el-select
                        v-model="filterData.from_type"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in tagTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单状态
                    </div>
                    <el-select
                        v-model="filterData.status"
                        class="input-unit-value"
                        size="small"
                        multiple
                        collapse-tags
                        clearable
                        placeholder="不限"
                        @change="fnGetData(1)"
                        style="width: 170px;"
                    >
                        <el-option
                            v-for="item in statusTypes"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        维权类型
                    </div>
                    <el-select
                        v-model="filterData.cancel_apply_type"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in cancelApplyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单支付状态
                    </div>
                    <el-select
                        v-model="filterData.pay_status"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in payTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <!-- <div class="input-unit">
                    <div class="lable">
                        退款申请
                    </div>
                    <el-select
                        v-model="filterData.cancel_status"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in refundApplyTypes"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        />
                    </el-select>
                </div> -->
                <!-- <div class="input-unit">
                    <div class="lable">
                        退款状态
                    </div>
                    <el-select
                        v-model="filterData.refund_status"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetData(1)"
                    >
                        <el-option
                            v-for="item in refundTypes"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        />
                    </el-select>
                </div> -->
                <!-- <div class="input-unit">
                    <div class="lable">
                        公司名称
                    </div>
                    <el-input
                        placeholder="请输入店铺编号"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.hire_company_name_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div> -->
                <!-- <div class="input-unit">
                    <div class="lable">
                        商品编号
                    </div>
                    <el-input
                        placeholder=""
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.shop_number"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div> -->
                <!-- <div class="input-unit">
                    <div class="lable">
                        用户
                    </div>
                    <el-input
                        placeholder="用户ID或手机号"
                        class="input-unit-input"
                        size="small"
                        v-model="filterData.student_id_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetData(1)"
                        @change="fnGetData(1)"
                    />
                </div> -->
                <div class="input-unit">
                    <div class="lable">
                        下单时间
                    </div>
                    <el-date-picker
                        v-model="filterData.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        @change="fnGetData(1)"
                        :default-time="['00:00:00', '23:59:59']"
                        :style="{width: '350px'}"
                    />
                </div>
                <div class="input-unit">
                    <el-button
                        size="small"
                        type="primary"
                        @click="fnGetData(1)"
                    >
                        搜索
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        @click="fnExportSelf()"
                    >
                        导出
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 自营header -->

        <!-- 淘客header -->
        <div
            class="search-bar"
            v-if=" shop_type == '2' "
        >
            <div class="right">
                <div class="input-unit">
                    <div class="lable">
                        订单状态
                    </div>
                    <el-select
                        v-model="tkData.order_status"
                        class="input-unit-value"
                        size="small"
                        @change="fnGetTableDateTk(1)"
                    >
                        <el-option
                            v-for="item in statusTypesTK"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单类型
                    </div>
                    <el-select
                        v-model="tkData.order_type"
                        class="input-unit-value"
                        size="small"
                        placeholder="不限"
                        @change="fnGetTableDateTk(1)"
                    >
                        <el-option
                            v-for="item in typeTypesTk"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="input-unit">
                    <div class="lable">
                        商品名称/编号
                    </div>
                    <el-input
                        placeholder="商品名称或编号"
                        class="input-unit-input"
                        size="small"
                        v-model="tkData.goods_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetTableDateTk(1)"
                        @change="fnGetTableDateTk(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        店铺搜索
                    </div>
                    <el-input
                        placeholder="请输入店铺编号"
                        class="input-unit-input"
                        size="small"
                        v-model="tkData.shop_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetTableDateTk(1)"
                        @change="fnGetTableDateTk(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        姓名
                    </div>
                    <el-input
                        placeholder="请输入姓名"
                        class="input-unit-input"
                        size="small"
                        v-model="tkData.user_keyword"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetTableDateTk(1)"
                        @change="fnGetTableDateTk(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        用户
                    </div>
                    <el-input
                        placeholder="用户ID或手机号"
                        class="input-unit-input"
                        size="small"
                        v-model="tkData.keyword_student_id"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetTableDateTk(1)"
                        @change="fnGetTableDateTk(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        订单编号
                    </div>
                    <el-input
                        placeholder="请输入订单编号"
                        class="input-unit-input"
                        size="small"
                        v-model="tkData.order_no"
                        clearable
                        suffix-icon="el-icon-search"
                        @keyup.native.enter="fnGetTableDateTk(1)"
                        @change="fnGetTableDateTk(1)"
                    />
                </div>
                <div class="input-unit">
                    <div class="lable">
                        下单时间
                    </div>
                    <el-date-picker
                        v-model="tkData.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        @change="fnGetTableDateTk(1)"
                        :default-time="['00:00:00', '23:59:59']"
                        :style="{width: '350px'}"
                    />
                </div>
                <div class="input-unit">
                    <el-button
                        size="small"
                        type="primary"
                        @click="fnGetTableDateTk(1)"
                    >
                        搜索
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        @click="fnExportTk()"
                    >
                        导出
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 淘客header -->

        <!-- 自营无数据 -->
        <div
            class="empty-wrap"
            v-if="tableData.length === 0 && !loading && shop_type === '0' "
        >
            <div class="empty-img"/>
            <p class="empty-text">
                你还没有订单哦~
            </p>
        </div>
        <!-- 自营无数据 -->

        <!-- 淘客无数据 -->
        <div
            class="empty-wrap"
            v-if="tableDataTK.length === 0 && !loading && shop_type === '2' "
        >
            <div class="empty-img"/>
            <p class="empty-text">
                你还没有订单哦~
            </p>
        </div>
        <!-- 淘客无数据 -->

        <div
            v-if="tableData.length > 0 && shop_type == '0' "
            v-loading="loading"
            class="orderSelfMain"
        >
            <div class="order_header">
                <div
                    class="order_nav"
                    :style="{minWidth: '2170px'}"
                >
                    <div
                        v-for="(title,index) in tableHeader"
                        :key="index"
                        class="order_title"
                        :class="'header'+ index"
                        :style="{
                            paddingLeft: '0px', paddingRight: '0px', textAlign: 'center',
                            maxWidth: index === 5 ? '315px' : ''
                        }"
                    >
                        {{ title }}
                    </div>
                </div>
            </div>
            <div class="order_self">
                <div class="order_wrap">
                    <div
                        v-for="(row,index) in tableData"
                        :key="index"
                        class="order_list"
                        :style="{minWidth: '2170px'}"
                    >
                        <!-- 订单信息 -->
                        <div class="order_data">
                            <div class="order_info">
                                <p class="order_category">
                                    {{ row.order_category | filterCategory }}
                                </p>
                                <p
                                    class="order_category from-type"
                                    v-if="row.from_type > 12"
                                >
                                    {{ row.from_type | filterFromType }}
                                </p>
                                <p class="order_no">
                                    订单编号: {{ row.order_no ? row.order_no : '--' }}
                                </p>
                                <p class="order_time">
                                    下单时间: {{ row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                </p>
                                <p class="order_time">
                                    下单店铺: {{ row.shop_title ? row.shop_title : '--' }}
                                </p>
                            </div>
                        </div>

                        <!-- 商品数据列表 -->
                        <div class="order_content orderHeight">
                            <div
                                class="order_side"
                                data-info="基本信息"
                                :style="{width: '472px', flex: 'none', alignItems: 'flex-start'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{textAlign: 'left', justifyContent: 'flex-start', padding: '0 24px'}"
                                    >
                                        <img
                                            :src="item.goods_info.thumb_pic"
                                            class="order_cover"
                                            @click="fnShowPreview(item.goods_info.thumb_pic)"
                                        >
                                        <div class="order_product">
                                            <p
                                                v-if="item.goods_info.title"
                                                class="order_title"
                                            >
                                                {{ item.goods_info.title }}
                                            </p>
                                            <p
                                                v-if="item.goods_product_info.goods_specs.length > 0"
                                                class="order_spec"
                                            >
                                                {{ item.goods_product_info.goods_specs | filterSpec }}
                                            </p>
                                            <p
                                                class="order_spec"
                                                style="margin-top: 12px;color: #333"
                                            >
                                                <span>{{ item.price ? '¥' + item.price : '--' }}</span>
                                                <span style="margin-left: 12px">{{ item.num ? `x${item.num}` : '--' }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="实付款"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <div class="order_side_info">
                                            {{ item.money ? '¥' + item.money : '--' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--优惠信息-->
                            <div
                                class="order_side no-padding"
                                data-info="优惠信息"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    class="order_side_info_fatch"
                                    :style="{height: row.length * 132 + 'px'}"
                                >
                                    <div
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                        v-if="row.discount_info.length"
                                    >
                                        <p
                                            v-for="(item,index) in row.discount_info"
                                            :key="index"
                                        >
                                            <span>{{ item.desc }}：减{{ item.discount_money }}</span>
                                        </p>
                                    </div>
                                    <div v-else>--</div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="用户信息"
                                :style="{width: '240px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}">
                                            姓名: {{ option.true_name ? option.true_name : '--' }}
                                        </p>
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px', marginTop: '6px'}">
                                            手机号: {{ option.phone ? option.phone : '--' }}
                                        </p>
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px', marginTop: '6px'}">
                                            用户编号: {{ option.student_no ? option.student_no : '--' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="上级精英"
                                :style="{width: '240px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}">
                                            姓名: {{ option.parent_stuagent.true_name ? option.parent_stuagent.true_name : '--' }}
                                        </p>
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px', marginTop: '6px'}">
                                            手机号: {{ option.parent_stuagent.phone ? option.parent_stuagent.phone : '--' }}
                                        </p>
                                        <p :style="{width: '80%', textAlign: 'center', lineHeight: '22px', marginTop: '6px'}">
                                            邀请码: {{ option.parent_stuagent.invite_code ? option.parent_stuagent.invite_code : '--' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!--<div
                                class="order_side no-padding"
                                data-info="购买信息"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p>
                                            数量: {{ item.num ? item.num + '件' : '&#45;&#45;' }}
                                        </p>
                                        <p :style="{marginTop: '12px'}">
                                            单价: {{ item.price ? '¥' + item.price : '&#45;&#45;' }}
                                        </p>
                                    </div>
                                </div>
                            </div>-->
                            <!--<div
                                class="order_side no-padding"
                                data-info="店铺名"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    class="order_side_info_fatch"
                                    :style="{height: row.length * 132 + 'px'}"
                                >
                                    <div
                                        class="order_side_info"
                                        :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}"
                                    >
                                        {{ row.shop_title ? row.shop_title : '&#45;&#45;' }}
                                    </div>
                                </div>
                            </div>-->
                            <!-- <div
                                class="order_side no-padding"
                                data-info="下单时间"
                                :style="{width: '150px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                    :style="{height: option.order_item_list.length * 132 + 'px'}"
                                >
                                    <div class="order_side_info">
                                        {{ row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                    </div>
                                </div>
                            </div> -->
                            <div
                                class="order_side no-padding"
                                data-info="收件信息"
                                :style="{width: 'auto', maxWidth: '315px', flex: '1'}"
                            >
                                <div
                                    class="order_side_info_fatch"
                                    :style="{height: row.length * 132 + 'px'}"
                                >
                                    <div
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p class="order-elispe">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="row.address_info.user_name"
                                                placement="top-start"
                                            >
                                                <el-button
                                                    type="text"
                                                    :style="{color: '#000'}"
                                                >
                                                    收件人:{{ row.address_info.user_name }}
                                                </el-button>
                                            </el-tooltip>
                                        </p>
                                        <p class="order-elispe">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="row.address_info.phone"
                                                placement="top-start"
                                            >
                                                <el-button
                                                    type="text"
                                                    :style="{color: '#000'}"
                                                >
                                                    收件号码:{{ row.address_info.phone }}
                                                </el-button>
                                            </el-tooltip>
                                        </p>
                                        <p class="order-elispe">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="row.address_info.province_name + row.address_info.city_name + row.address_info.county_name + row.address_info.detail_info"
                                                placement="top-start"
                                            >
                                                <el-button
                                                    type="text"
                                                    @click="copyInfo(row.address_info.province_name + row.address_info.city_name + row.address_info.county_name + row.address_info.detail_info)"
                                                >
                                                    收件地址:{{ row.address_info.province_name + row.address_info.city_name + row.address_info.county_name + row.address_info.detail_info }}
                                                </el-button>
                                            </el-tooltip>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- <div
                                class="order_side no-padding"
                                data-info="订单类型"
                                :style="{width: '150px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                    :style="{height: option.order_item_list.length * 132 + 'px'}"
                                >
                                    <div class="order_side_info">
                                        {{ row.order_category | filterCategory }}
                                    </div>
                                </div>
                            </div> -->
                            <div
                                class="order_side no-padding"
                                data-info="运费"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <div class="order_side_info">
                                            {{ item.freight ? '¥' + item.freight : '--' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="物流信息"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    class="order_side_info_fatch"
                                    :style="{height: row.length * 132 + 'px'}"
                                >
                                    <div
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p>
                                            物流名称: {{ row.logistics_name ? row.logistics_name : '--' }}
                                        </p>
                                        <p :style="{marginTop: '12px'}">
                                            物流单号: {{ row.tracking_no ? row.tracking_no : '--' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="交易状态"
                                :style="{width: '180px', flex: 'none'}"
                            >
                                <div
                                    v-for="(option, idx) in row.buy_student_list"
                                    :key="idx"
                                    class="order_side_info_fatch"
                                    :style="{height: option.order_item_list.length * 132 + 'px'}"
                                >
                                    <div
                                        v-for="(item, key) in option.order_item_list"
                                        :key="key"
                                        class="order_side_info"
                                        :style="{flexDirection: 'column'}"
                                    >
                                        <p :class="`order-status order-status-${row.status}`">{{ row.status | filterStatus }}</p>
                                        <div class="order_flex">
                                            <div
                                                v-if="row.status == 0"
                                                class="order_detail border"
                                                @click="fnDelete(row.order_no)"
                                            >
                                                取消订单
                                            </div>
                                            <div
                                                v-if="(row.status == 3 || row.status == 4) && item.cancel_apply_info.type == 2 && item.cancel_status == 11"
                                                class="order_detail border"
                                                @click="fnSeeLogInfo(row.order_no, 2, item.cancel_apply_info.apply_no)"
                                            >
                                                查看退货物流
                                            </div>
                                            <div
                                                v-if="(row.status == 3 || row.status == 4)"
                                                class="order_detail border"
                                                @click="fnSeeLogInfo(row.order_no, 1)"
                                            >
                                                查看物流
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- 备注 -->
                        <div class="order_remark">
                            买家备注:
                            <p>{{ row.student_remark ? row.student_remark : '--' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 自营表单 -->

        <!-- 淘客表单 -->
        <el-table
            :data="tableDataTK"
            height="100%"
            style="width: 100%;"
            class="common-table"
            v-if="tableDataTK.length > 0 && shop_type == '2' "
            v-loading="loading"
            ref="tabletk"
        >
            <el-table-column
                label="基本信息"
                show-overflow-tooltip
                width="200px"
            >
                <template slot-scope="scope">
                    <div class="good-detail">
                        <div
                            class="cover"
                            :style="'background-image: url('+scope.row.goods_cover+')'"
                        />
                        <div class="detail">
                            <div
                                class="title ellipsis"
                                :title="scope.row.goods_title"
                            >
                                {{ scope.row.goods_title }}
                            </div>
                            <!-- <div class="no ellipsis">
                                    规格: {{ scope.row.goods_specs | specFilter }} ￥{{ scope.row.num }}x{{ scope.row.price }}
                                </div> -->
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="pay_money"
                label="实付款(￥)"
                show-overflow-tooltip
                :width="200"
            >
                <template slot-scope="scope">
                    <div>
                        <p>{{ scope.row.pay_money }}</p>
                        <p style="color:#C0C4CC">
                            {{ scope.row.order_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="income_money_pre"
                label="预估佣金"
            />
            <el-table-column
                prop="buyer_rebate_money"
                label="购买者反佣"
            />
            <el-table-column
                prop="other_rebate_money"
                label="非购买者反佣"
            />
            <el-table-column
                prop="shop_title"
                label="店铺名"
            />
            <el-table-column
                prop="order_type"
                label="订单类型"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.order_type == 'free' ">0元购</span>
                    <span v-else-if="scope.row.order_type == 'other' ">其它</span>
                    <span v-else-if="scope.row.order_type == 'flash_sale' ">秒杀</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column label="用户信息">
                <template slot-scope="scope">
                    <div class="message-detail">
                        <div>姓名:{{ scope.row.student_info.true_name }}</div>
                        <div>手机号:{{ scope.row.student_info.phone }}</div>
                        <div>编号:{{ scope.row.student_info.student_no }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="order_no"
                label="订单编号"
                show-overflow-tooltip
            />
            <el-table-column
                prop="order_status"
                label="订单状态"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.order_status == 1 ">订单付款</span>
                    <span v-if="scope.row.order_status == 2 ">订单收货</span>
                    <span v-if="scope.row.order_status == -1 ">订单取消</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <p
                        class="cursor-font"
                        @click="fnCheckHistory(1, scope.row)"
                    >
                        购买记录
                    </p>
                </template>
            </el-table-column>
        </el-table>
        <!-- 淘客表单 -->

        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if=" shop_type == '0' || shop_type == '1' "
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="fnGetData"
            />
        </div>

        <div
            class="pagination-wrapper clearfix"
            v-if=" shop_type == 2 "
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="pageTk.now_page"
                :total="pageTk.total_count"
                :page-size="pageTk.page_size"
                @current-change="fnGetTableDateTk"
            />
        </div>

        <!-- 购买记录 -->
        <el-dialog
            :visible.sync="dialogGoodsShop"
            :close-on-click-modal="false"
            width="500px"
        >
            <p class="zd-order-cunt">
                <span>总消费金额:{{ shopCount }}元</span>
                <span style="padding-left:20px">已充值金额:{{ rechargeCount }}元</span>
            </p>
            <el-table
                :data="shopHistory"
                style="width: 100%"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                />
                <el-table-column
                    prop="order_time"
                    align="center"
                    label="购买时间"
                >
                    <template slot-scope="scope">
                        {{ scope.row.order_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_money"
                    align="center"
                    label="实付款"
                />
                <el-table-column
                    align="center"
                    label="查看订单"
                >
                    <template slot-scope="scope">
                        <p
                            class="cursor-font"
                            @click="fnLookOrder(scope.row)"
                        >
                            查看
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="zd-dialog-foot">
                <!-- 按钮需要加权限 -->
                <el-button
                    size="small"
                    type="primary"
                    @click="fnRecharge()"
                >
                    充值
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    style="margin-left: 80px"
                    @click="dialogGoodsShop = false"
                >
                    退出
                </el-button>
            </div>
        </el-dialog>

        <!-- 充值弹窗 -->
        <el-dialog
            :visible.sync="dialogRechaege"
            :close-on-click-modal="false"
            width="500px"
            title="充值"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="50px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="标题"
                    prop="title"
                >
                    <el-input
                        v-model="ruleForm.title"
                        size="small"
                        clearable
                    />
                </el-form-item>
                <el-form-item
                    label="金额"
                    prop="money"
                >
                    <el-input
                        v-model="ruleForm.money"
                        size="small"
                        clearable
                    />
                </el-form-item>
                <p class="zd-dialog-tips">*确定后钱将打入对方账户,请谨慎操作!</p>
                <div class="zd-dialog-foot">
                    <el-button
                        @click="dialogRechaege = false"
                        size="small"
                    >取消
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="submitForm('ruleForm')"
                        style="margin-left:80px"
                        v-if="authResult.auth_money"
                    >
                        充值
                    </el-button>
                </div>
            </el-form>
        </el-dialog>

        <!-- 查看物流单号 -->
        <el-dialog
            :visible.sync="dialogLogistics"
            width="478px"
            class="zd-logsitaic"
            :close-on-click-modal="false"
        >
            <p class="logsitaic-title">
                物流信息
            </p>
            <div class="log-wrap">
                <img
                    :src="logistics.goods_cover"
                    class="log-wrap-cover"
                >
                <div class="log-main">
                    <p class="log-main-company">
                        物流公司：
                        <span class="log-main-name">
                            {{ logistics.logistics_name }}
                        </span>
                    </p>
                    <p class="log-main-company">
                        物流单号：
                        <span class="log-main-name">
                            {{ logistics.tracking_no }}
                        </span>
                        <i
                            class="el-icon-copy-document"
                            @click="fnCopytrak(logistics.tracking_no)"
                        />
                    </p>
                    <p class="log-main-company">
                        物流电话：
                        <span class="log-main-name">
                            {{ logistics.logistics_phone }}
                        </span>
                    </p>
                </div>
            </div>
            <div
                class="step"
                style="max-height:500px"
                v-if="logistics.tracking_info_list.length > 0"
            >
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in logistics.tracking_info_list"
                        :key="index"
                        :icon="index == 0 ? logistics.tracking_status == 0 ? 'iconfont el-icon-hand-zaituzhong' : (logistics.tracking_status == 1 ? 'iconfont el-icon-hand-zaituzhong' : (logistics.tracking_status == 2 ? 'iconfont el-icon-hand-zhengzaipaijian' : (logistics.tracking_status == 3 ? 'iconfont el-icon-hand-yiqianshou' : (logistics.tracking_status == 4 ? 'iconfont el-icon-hand-paisongshibai' : (logistics.tracking_status == 5 ? 'iconfont el-icon-hand-yinanjian' : (logistics.tracking_status == 6 ? 'iconfont el-icon-hand-tuijianqianshou' : 'iconfont el-icon-hand-kuaidishoujian')))))) : ''"
                        :type="index == 0 ? 'primary' : 'dangers'"
                        :size="index == 0 ? 'large' : 'normal'"
                        :timestamp="activity.create_time"
                    >
                        <p
                            v-if="index == 0"
                            style="color:#3F454B;font-size:16px;font-weight:500;margin-bottom:5px"
                        >
                            {{ logistics.tracking_status == -1 ? '暂无信息' : '' }}
                            {{ logistics.tracking_status == 0 ? '正在揽件' : '' }}
                            {{ logistics.tracking_status == 1 ? '途中' : '' }}
                            {{ logistics.tracking_status == 2 ? '派件中' : '' }}
                            {{ logistics.tracking_status == 3 ? '已签收' : '' }}
                            {{ logistics.tracking_status == 4 ? '派送失败' : '' }}
                            {{ logistics.tracking_status == 5 ? '疑难件' : '' }}
                            {{ logistics.tracking_status == 6 ? '退件签收' : '' }}
                        </p>
                        {{ activity.info }}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div v-else>
                {{ logistics.tracking_status == -1 ? '暂无信息' : '' }}
            </div>
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview"/>
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';

const SELF_ORDER = {
    maxWidth: false,//横向滚动临界点最大宽度
    tableHeader: ['基本信息', '实付款', '优惠信息', '用户信息', '上级精英', '收件信息', '运费', '物流信息', '交易状态'],
};

export default {
    components: {imgPreview},
    data() {
        return {
            ...SELF_ORDER,
            logistics: {
                logistics_phone: '',
                tracking_info_list: [],
                tracking_no: '',
                goods_no: '',
                goods_cover: '',
                logistics_name: '',
                tracking_status: '',//物流状态, -1:暂无信息, 0:揽件, 1:途中, 2:派件中, 3:已签收, 4:派送失败, 5:疑难件, 6:退件签收
                courier_phone: '',
                courier_name: ''
            },
            dialogLogistics: false,//物流信息弹窗
            chargeStudent_no: '', //记录购买用户编号
            ruleForm: {
                title: '',
                money: ''
            },
            rules: {
                title: [
                    {required: true, message: '请输入标题,不可以为空', trigger: 'change'}
                ],
                money: [
                    {required: true, message: '请输入金额,不可以为空', trigger: 'change'}
                ]
            },
            dialogRechaege: false,
            shopCount: 0,
            rechargeCount: 0,
            shopHistory: [],
            dialogGoodsShop: false,
            shop_type: '0',
            types: [],
            statusTypes: [{
                name: '待支付',
                value: 0,
            }, {
                name: '团购中',
                value: 98,
            }, {
                name: '待发货',
                value: 2,
            }, {
                name: '待收货',
                value: 3,
            }, {
                name: '订单取消',
                value: -1,
            }, {
                name: '订单完成',
                value: 4,
            }],
            statusTypesSQ: [{
                name: '全部',
                value: 99,
            }, {
                name: '待付款',
                value: 0,
            }, {
                name: '待发货',
                value: 2,
            }, {
                name: '订单失败',
                value: -1,
            }, {
                name: '已完成',
                value: 4,
            }],
            statusTypesTK: [{
                name: '全部',
                value: ''
            }, {
                name: '订单付款',
                value: 1
            }, {
                name: '订单收货',
                value: 2
            }, {
                name: '订单取消',
                value: -1
            }, {
                name: '未取消',
                value: 98
            }],
            typeTypes: [{//自营商品类型
                value: 99,
                label: '全部'
            }, {
                value: 0,
                label: '一般订单'
            }, {
                value: 1,
                label: '抢购订单'
            }, {
                value: 2,
                label: '核销订单'
            }, {
                value: 3,
                label: '折扣订单'
            }, {
                value: 4,
                label: '抽奖订单'
            }, {
                value: 5,
                label: '0元购'
            }, {
                value: 6,
                label: '砍价订单'
            }, {
                value: 7,
                label: '团购'
            }, {
                value: 8,
                label: '新人专享'
            }, {
                value: 9,
                label: '会员卡0元购'
            }, {
                value: 10,
                label: '虚拟商品'
            }, {
                value: 11,
                label: '邀请助力'
            }, {
                value: 12,
                label: '卡券包'
            },{
                value: 14,
                label: '虚拟卡密订单'
            }],
            // 订单标签
            tagTypes: [
                {value: 99, label: '全部'},
                {value: 0, label: '一般订单'},
                {value: 1, label: '抢购订单'},
                {value: 2, label: '核销订单'},
                {value: 3, label: '折扣订单'},
                {value: 4, label: '抽奖订单'},
                {value: 5, label: '0元购'},
                {value: 6, label: '砍价订单'},
                {value: 7, label: '团购'},
                {value: 8, label: '新人专享'},
                {value: 9, label: '会员卡0元购'},
                {value: 10, label: '虚拟商品'},
                {value: 11, label: '邀请助力'},
                {value: 12, label: '卡券包'},
                {value: 13, label: '临期商品'},
                {value: 14, label: '社群商品'},
                {value: 15, label: '砍价商品'},
            ],
            typeTypesTk: [{
                value: '',
                label: '全部'
            }, {
                value: 'free',
                label: '0元购'
            }, {
                value: 'other',
                label: '其它购买'
            }, {
                value: 'flash_sale',
                label: '秒杀'
            }],
            refundApplyTypes: [{
                name: '全部',
                value: 99,
            }, {
                name: '未申请',
                value: 0,
            }, {
                name: '待处理',
                value: 1,
            }, {
                name: '已通过',
                value: 2,
            }, {
                name: '已驳回',
                value: -1,
            }, {
                name: '待退货',
                value: 11,
            }],
            refundTypes: [{
                name: '全部',
                value: 99,
            }, {
                name: '未退款',
                value: 0,
            }, {
                name: '退款中',
                value: 1,
            }, {
                name: '退款成功',
                value: 2,
            }, {
                name: '退款失败',
                value: -1,
            }],
            cancelApplyList: [{
                value: 99,
                label: '全部'
            }, {
                value: 1,
                label: '仅退款'
            }, {
                value: 2,
                label: '退货退款'
            }],
            payTypes: [{
                label: '全部',
                value: 99,
            }, {
                label: '未支付',
                value: 0,
            }, {
                label: '已支付',
                value: 1,
            }],
            filterData: {
                // 默认全选
                status: [0, 2, 3, 4, -1, 98],
                type: 99,
                cancel_status: 99,
                refund_status: 99,
                goods_title: '',
                shop_title: '',
                shop_number: '',
                user_keyword: '',
                student_id_keyword: '',
                hire_company_name_keyword: '',
                cancel_apply_type: 99,
                date: [],
                rebate_stuagent_no: '',
                from_no: '',
                pay_status: 99,
                rebate_stuagent_keyword: '',
                from_type: 99
            },
            tkData: {
                order_status: '',
                order_type: '',
                order_no: '',
                goods_keyword: '',
                shop_keyword: '',
                user_keyword: '',
                keyword_student_id: '',
                date: []
            },
            shop_no: '',
            tableData: [],
            tableDataSQ: [],
            tableDataTK: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0,
                total_page: 0
            },
            pageTk: {
                now_page: 1,
                total_count: 0,
                page_size: 0,
                total_page: 0
            },
            loading: true,
            lastQueryTime: 0,
            fans_fp: '',
            fans: '',
            shop_page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            authResult: {}
        };
    },
    watch: {
        dialogRechaege(val) {
            if (!val) {
                this.ruleForm = {
                    title: '',
                    money: ''
                };
                this.$refs['ruleForm'].resetFields();
            }
        }
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台",}, {title: '商城'}, {title: "订单管理"}]);
        this.authResult = this.$route.meta.authResult;
        this.getParam();

        if (this.$route.query.from_no) {
            this.filterData.type = Number(this.$route.query.type) || 99;
            this.filterData.from_type = Number(this.$route.query.from_type) || 99;
            this.filterData.pay_status = 1;
            this.filterData.from_no = this.$route.query.from_no;
        } else if (this.$route.query.orderType) {
            // 筛选订单类型
            this.filterData.pay_status = 1;
            this.filterData.type = Number(this.$route.query.orderType);
        }

        this.fnGetData(1);
        if (Number(this.shop_type) == 2) {
            this.fnGetTableDateTk(1);
        }

        if (window.history && window.history.pushState && this.fans_fp !== '') {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }

        setTimeout(() => {
            this.scrollAnsync();
            this.loading = false;
        }, 1000);
    },
    destroyed() {
        if (this.fans_fp !== '') {
            window.removeEventListener('popstate', this.goBack, false);
        }
    },
    filters: {
        statusFilter(val, list) {
            for (var i in list) {
                if (list[i].value == val) {
                    return list[i].name;
                }
            }
            return '';
        },
        specFilter(val) {
            let str = '';

            for (let i in val) {
                str += val[i].value;
                if (i < val.length - 1) {
                    str += ',';
                }
            }

            return str ? str : '--';
        },
        filterSpec(val) {
            let str = '';

            val.forEach(element => {
                str += element.spec_name + ';' + element.spec_value + ';';
            });

            return str;
        },
        filterCategory(val) {
            if (val === 0) return '一般订单';
            if (val === 1) return '抢购订单';
            if (val === 2) return '核销订单';
            if (val === 3) return '折扣订单';
            if (val === 4) return '抽奖订单';
            if (val === 5) return '0元购';
            if (val === 6) return '砍价订单';
            if (val === 7) return '团购订单';
            if (val === 8) return '新人专区';
            if (val === 9) return '会员卡0元购';
            if (val === 10) return '虚拟商品';
            if (val === 11) return '邀请助力';
            if (val === 12) return '卡券包';
            if (val === 14) return '虚拟卡密订单';
        },
        filterFromType(val) {
            if (val === 0) return '一般订单';
            if (val === 1) return '抢购订单';
            if (val === 2) return '核销订单';
            if (val === 3) return '折扣订单';
            if (val === 4) return '抽奖订单';
            if (val === 5) return '0元购';
            if (val === 6) return '砍价订单';
            if (val === 7) return '团购订单';
            if (val === 8) return '新人专区';
            if (val === 9) return '会员卡0元购';
            if (val === 10) return '虚拟商品';
            if (val === 11) return '邀请助力';
            if (val === 12) return '卡券包';
            if (val === 13) return '临期商品';
            if (val === 14) return '社群商品';
            if (val === 15) return '砍价商品';
        },
        filterStatus(val) {
            if (val == 0) return '待支付';
            if (val == 1) return '拼团中';
            if (val == 2) return '待发货';
            if (val == 3) return '待收货';
            if (val == 4) return '订单完成';
            if (val == -1) return '订单取消';
        }
    },
    methods: {
        /**
         * @description 获取url参数
         */
        getParam() {
            let query = this.$route.query;

            if (query) {
                this.shop_no = query.aim_no ? query.aim_no : (query.order_no == undefined ? '' : query.order_no);
                this.fans_fp = query.fans_fp;
                this.fans = query.fans;
                this.filterData.shop_title = query.shop_title == undefined ? '' : query.shop_title;
                this.filterData.student_id_keyword = query.keyword_student_id == undefined ? '' : query.keyword_student_id;
            }

            if (query.cancel_status) {
                this.filterData.cancel_status = query.cancel_status == undefined ? '' : query.cancel_status;
            }

            /* 秒杀淘客商品 */
            if (query.shop_type !== undefined || query.goods_keyword !== undefined) {
                this.shop_type = query.shop_type == undefined ? '' : query.shop_type;
                this.tkData.goods_keyword = query.goods_keyword == undefined ? '' : query.goods_keyword;
            }

            /* 掌大精英查看商圈 */
            if (query.aim_no && query.shop_type == 1) {
                this.shop_type = '1';
                this.filterData.type = 4;
                this.shop_no = query.aim_no;
            }

            /* 掌大精英粉丝订单查看 */
            if (query.aim_no && query.shop_type == 2) {
                this.tkData.order_no = query.aim_no;
                this.fans = query.fans;
            }
        },

        /**
         * @description 获取自营表单数据
         */
        fnGetData(page) {
            let timeTmp = new Date().getTime();
            let query = this.$route.query;

            this.lastQueryTime = timeTmp;
            this.loading = true;
            this.filterData.rebate_stuagent_no = query.rebate_stuagent_no ? query.rebate_stuagent_no : '';
            this.filterData.from_no = query.from_no ? query.from_no : '';

            //默认筛选条件
            if (this.filterData.rebate_stuagent_no) {
                this.$set(this.filterData, 'status', 98);
                this.$set(this.tkData, 'order_status', 98);
            }

            this.$post('/student/shop_goods_order%5Cget_list', {
                page_id: page || this.page.now_page,
                goods_keyword: this.filterData.goods_title,
                order_no: this.shop_no,
                student_keyword: this.filterData.user_keyword,
                shop_keyword: this.filterData.shop_title,
                order_category: this.filterData.type,
                status: this.filterData.status.join(),
                cancel_apply_type: this.filterData.cancel_apply_type,
                create_start_time: this.filterData.date === null ? '' : (this.filterData.date.length > 0 ? (new Date(this.filterData.date[0]).getTime() / 1000) : ''),
                create_end_time: this.filterData.date === null ? '' : (this.filterData.date.length > 0 ? (new Date(this.filterData.date[1]).getTime() / 1000) : ''),
                from_no: this.filterData.from_no,
                pay_status: this.filterData.pay_status,
                rebate_stuagent_keyword: this.filterData.rebate_stuagent_keyword,
                from_type: this.filterData.from_type
                // keyword_student_id: this.filterData.student_id_keyword,
                // type: this.filterData.type,
                // cancel_status: this.filterData.cancel_status,
                // refund_status: this.filterData.refund_status,
                // user_keyword: this.filterData.user_keyword,
                // hire_company_name_keyword: this.filterData.hire_company_name_keyword,
                // rebate_stuagent_no: this.filterData.rebate_stuagent_no,
            }, resp => {
                if (this.lastQueryTime != timeTmp) {
                    return;
                }
                if (resp.code == 1) {
                    if (this.shop_type == '0') {
                        this.tableData = this.tableDataMac(resp.data.list);
                    } else if (this.shop_type == '1') {
                        this.tableDataSQ = resp.data.list;
                    }
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_page = resp.data.page.total_page;
                    this.page.page_size = resp.data.page.page_size;
                    this.page.total_count = resp.data.page.total_count;
                    if (document.querySelector('.is-scrolling-none')) {
                        document.querySelector('.is-scrolling-none').scrollTop = 0;
                    }

                    setTimeout(() => {
                        this.scrollAnsync();
                    }, 500);
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
                setTimeout(() => {
                    this.loading = false;
                }, 200);
            });
        },

        /**
         * @description 数据加工
         */
        tableDataMac(tableData) {
            if (tableData.length > 0) {
                tableData.forEach(element => {
                    let buy_student_list = element.buy_student_list;
                    let index = 0;

                    if (buy_student_list.length) {
                        buy_student_list.forEach(el => {
                            const order_item_list = el.order_item_list;

                            if (order_item_list.length) {
                                order_item_list.forEach(e => {
                                    index++;
                                });
                            }
                        });
                    }

                    element.length = index;
                });

                return tableData;
            } else {
                return [];
            }
        },

        /**
         * @description 获取淘客表单数据
         */
        fnGetTableDateTk(page) {
            let timeTmp = new Date().getTime();
            let query = this.$route.query;

            this.lastQueryTime = timeTmp;
            this.loading = true;
            this.filterData.rebate_stuagent_no = query.rebate_stuagent_no ? query.rebate_stuagent_no : '';
            this.$post('/student/shop_goods_order%5Cget_tbk_order_list', {
                page_id: page || this.pageTk.now_page,
                ...this.tkData,
                order_start_time: this.tkData.date === null ? '' : (this.tkData.date.length > 0 ? (new Date(this.tkData.date[0]).getTime() / 1000) : ''),
                order_end_time: this.tkData.date === null ? '' : (this.tkData.date.length > 0 ? (new Date(this.tkData.date[1]).getTime() / 1000) : ''),
                rebate_stuagent_no: this.filterData.rebate_stuagent_no
            }, resp => {
                if (this.lastQueryTime != timeTmp) {
                    return;
                }
                if (resp.code == 1) {
                    this.tableDataTK = resp.data.list;
                    this.pageTk.now_page = resp.data.page.now_page;
                    this.pageTk.total_page = resp.data.page.total_page;
                    this.pageTk.page_size = resp.data.page.page_size;
                    this.pageTk.total_count = resp.data.page.total_count;
                    if (document.querySelector('.is-scrolling-none')) {
                        document.querySelector('.is-scrolling-none').scrollTop = 0;
                    }
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
                setTimeout(() => {
                    this.loading = false;
                }, 200);
            });
        },

        /**
         * @description 监听横向滚动,触发同步更新
         */
        scrollAnsync() {
            document.querySelector('.order_self').addEventListener('scroll', e => {
                document.querySelector('.order_header').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft + 3 : e.target.scrollLeft;
            }, false);

            document.querySelector('.order_header').addEventListener('scroll', e => {
                document.querySelector('.order_self').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft - 3 : e.target.scrollLeft;
            }, false);

            window.onresize = window.onload = e => {
                this.maxWidth = e.currentTarget.innerWidth < 1921 ? true : false;
            };
            this.maxWidth = window.innerWidth < 1921 ? true : false;
        },

        /**
         * @description 监听页面返回按钮
         */
        goBack() {
            if (this.fans_fp == 1) {
                this.$router.replace({path: '/student/student-fans'});
            } else if (this.fans == 0) {
                this.$router.replace({path: '/student/student-peifans'});
            } else {
                this.$router.go(-1);
            }
        },

        /**
         * @description 查看物流信息
         */
        fnSeeLogInfo(no, type, apply_no) {
            this.$post('/student/shop_goods_order%5Cget_tracking_info', {
                order_no: no,
                type: type,
                apply_no: apply_no ? apply_no : ''
            }, resp => {
                if (resp.code == 1) {
                    let list = resp.data;
                    let arr = [];

                    list.tracking_info_list.forEach(option => {
                        arr.push({
                            create_time: this.fnGetDate(option.create_time * 1000, 'yyyy/MM/dd HH:mm:ss'),
                            info: option.info
                        });
                    });

                    list.tracking_info_list = arr;

                    this.logistics = list;
                    this.dialogLogistics = !this.dialogLogistics;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 时间转换
         */
        fnGetDate(dateTmp, fmtTmp) {
            let fmt = fmtTmp;
            let date = dateTmp;

            if (!fmt) {
                fmt = 'yyyy.MM.dd';
            }
            if (!(date instanceof Date)) {
                date = new Date(date);
            }
            let o = {
                "M+": date.getMonth() + 1, //月份
                "d+": date.getDate(), //日
                "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
                "H+": date.getHours(), //小时
                "m+": date.getMinutes(), //分
                "s+": date.getSeconds(), //秒
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            let week = {
                "0": "日",
                "1": "一",
                "2": "二",
                "3": "三",
                "4": "四",
                "5": "五",
                "6": "六"
            };

            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "周") : "") + week[date.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        },

        /**
         * @description 复制单号
         */
        fnCopytrak(no) {
            let str = no;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$message.success('复制成功');
        },

        /**
         * @description 导出自营表单数据
         */
        fnExportSelf() {
            // if(!this.authResult.auth_self) {
            //     this.$notify({
            //         type: 'warning',
            //         title: '提示',
            //         message: '此权限仅限超级管理员',
            //     });
            //     return false;
            // }
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            let url = `${base}/student/shop_goods_order%5Cexport_list?goods_keyword=${this.filterData.goods_title}&order_no=${this.shop_no}&student_true_name=${this.filterData.user_keyword}&shop_keyword=${this.filterData.shop_title}&order_category=${this.filterData.type}&status=${this.filterData.status.join()}&cancel_apply_type=${this.filterData.cancel_apply_type}&create_start_time=${this.filterData.date === null ? '' : (this.filterData.date.length > 0 ? (new Date(this.filterData.date[0]).getTime() / 1000) : '')}&create_end_time=${this.filterData.date === null ? '' : (this.filterData.date.length > 0 ? (new Date(this.filterData.date[1]).getTime() / 1000) : '')}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * @description 导出淘客表单数据
         */
        fnExportTk() {
            if (!this.authResult.auth_tk) {
                this.$notify({
                    type: 'warning',
                    title: '提示',
                    message: '此权限仅限超级管理员',
                });
                return false;
            }
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let {
                order_status,
                order_type,
                order_no,
                goods_keyword,
                shop_keyword,
                user_keyword,
                keyword_student_id
            } = this.tkData;

            let url = `${base}/student/shop_goods_order%5Cexport_tbk_order_list?keyword_student_id=${keyword_student_id}&order_status=${order_status}&order_type=${order_type}&order_no=${order_no}&goods_keyword=${goods_keyword}&shop_keyword=${shop_keyword}&user_keyword=${user_keyword}&order_start_time=${this.tkData.date === null ? '' : (this.tkData.date.length > 0 ? (new Date(this.tkData.date[0]).getTime() / 1000) : '')}&order_end_time=${this.tkData.date === null ? '' : (this.tkData.date.length > 0 ? (new Date(this.tkData.date[1]).getTime() / 1000) : '')}&rebate_stuagent_no=${this.filterData.rebate_stuagent_no}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * @description 查看购买记录
         */
        fnCheckHistory(page, row) {
            this.chargeStudent_no = row.student_info.student_no;
            this.$post('/student/shop_goods_order%5Cget_buy_list', {
                page_id: page || this.shop_page.now_page,
                student_no: this.chargeStudent_no
            }, resp => {
                if (resp.code == 1) {
                    this.shopCount = resp.data.stat.order_total_money;
                    this.rechargeCount = resp.data.stat.recharge_total_money;
                    this.shopHistory = resp.data.list;
                    this.dialogGoodsShop = !this.dialogGoodsShop;
                }
            });
        },

        /**
         * @description 查看订单
         */
        fnLookOrder(row) {
            if (row.order_type == 1) { //自营
                let routeData = this.$router.resolve({
                    name: 'OrderList',
                    query: {
                        shop_type: '0',
                        aim_no: row.order_no
                    }
                });

                window.open(routeData.href, '_blank');
            } else if (row.order_type == 2) { //淘客
                let routeData = this.$router.resolve({
                    name: 'OrderList',
                    query: {
                        shop_type: '2',
                        aim_no: row.order_no
                    }
                });

                window.open(routeData.href, '_blank');
            }
        },

        /**
         * @description 充值
         */
        fnRecharge() {
            this.dialogRechaege = !this.dialogRechaege;
        },

        /**
         * @description 确定充值
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/student_user%5Cchange_money', {
                        student_no: this.chargeStudent_no,
                        title: this.ruleForm.title,
                        money: this.ruleForm.money,
                    }, resp => {
                        if (resp.code == 1) {
                            this.dialogRechaege = !this.dialogRechaege;
                            this.rechargeCount = (Number(this.rechargeCount) + Number(this.ruleForm.money)).toFixed(2) * 1;
                            this.$notify({
                                type: 'success',
                                title: '充值成功',
                                message: resp.msg,
                            });
                        } else if (resp.code == 0) {
                            this.$notify({
                                type: 'warning',
                                title: '警告',
                                message: resp.msg,
                            });
                        }

                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        fnChangeStatus(no, type) {
            if (type == 1) {
                let cancelType = no.cancel_apply.type == 1 ? 1 : (no.cancel_apply.type == 2 ? 2 : '');

                if (cancelType == 1) {//仅退款
                    this.fnSetVerify(no.order_no, 1);
                } else if (cancelType == 2 && no.cancel_status == 1) {//退货退款
                    this.fnSetVerify(no.order_no, 3);
                } else if (cancelType == 2 && no.cancel_status == 11) {
                    this.fnSetVerify(no.order_no, 1);
                }
            }

            if (type == 2) {
                this.$prompt('请输入不通过的理由', '不通过理由', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '格式不正确'
                }).then(({value}) => {
                    this.$post('/student/shop_goods_order%5Ccancel_apply_verify', {
                        order_no: no,
                        type: 2,
                        refuse_reason: value
                    }, resp => {
                        if (resp.code == 1) {
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.fnGetData(this.page.now_page);
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                });
            }

            if (type == 3) {
                this.$confirm('你已收到买家寄回的商品，一旦通过，则将立即进行退款', '提示', {
                    confirmButtonText: '通过',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fnSetVerify(no, 1);
                });
            }
        },

        /**
         * 通过退货申请/取消订单申请通过(退货退款需先通过退货申请)
         */
        fnSetVerify(no, type) {
            this.$post('/student/shop_goods_order%5Ccancel_apply_verify', {
                order_no: no,
                type: type
            }, resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.fnGetData();
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        fnDelete(no) {
            if (!this.authResult.auth_cancel) {
                this.$notify({
                    title: '警告',
                    message: '此权限仅对管理员开发',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            this.$confirm('确认取消该订单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_order%5Ccancel', {
                    order_no: no
                }, resp => {
                    if (resp.code == 1) {
                        this.fnGetData(this.page.now_page);
                    }
                });
            }).catch(() => {
            });
        },

        /**
         * 商品类型切换
         */
        fnGetShopTypeList() {
            if (this.shop_type == 0) {
                this.tableDataTK = [];
                this.page.now_page = 1;
                this.fnFilterClear();
                this.fnGetData(1);
            } else if (this.shop_type == 1) {
                this.tableDataTK = [];
                this.fnFilterClear();
                this.filterData.type = 4;
                this.page.now_page = 1;
                this.fnGetData(1);
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.tableSq.doLayout();
                    }, 400);
                });
            } else if (this.shop_type == 2) {
                this.tableData = [];
                this.tableDataSQ = [];
                this.fnGetTableDateTk();
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.tabletk.doLayout();
                    }, 400);
                });
            }

        },

        /**
         * 重置
         */
        fnFilterClear() {
            this.filterData = {
                status: [0, 2, 3, 4, -1, 98],
                type: 99,
                cancel_status: 99,
                refund_status: 99,
                goods_title: '',
                shop_title: '',
                shop_number: '',
                user_keyword: '',
                cancel_apply_type: 99,
                date: []
            };
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        copyInfo(content) {
            let str = content;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$message.success('复制成功');
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};

</script>

<style lang="less" scoped>
// body .el-table th.gutter{
//     display: table-cell!important;
// }

/*el-tabs*/

/deep/ .el-tabs {

    .el-tabs__nav-wrap {
        height: 54px;
        padding-left: 24px;

        .el-tabs__nav-scroll {
            .el-tabs__nav {
                height: 54px;
                line-height: 54px;
            }
        }
    }
}

.goods-container {
    background-color: #fff;
    display: flex;
    margin: 12px;
    flex-direction: column;
    position: relative;
    width: calc(100% - 24px);
    overflow: hidden;
}

.search-tabbar {
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;

    .right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .input-unit {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: 15px;
        margin-bottom: 15px;

        &-value {
            width: 100px;
        }

        &-input {
            width: 170px;
        }

        .lable {
            flex-shrink: 0;
            margin: 0 5px 0 0;
        }
    }
}

.table-wrapper {
    flex: 1;
    overflow: hidden;
}

.pagination-wrapper .el-pagination {
    padding: 12px;
    float: right;
}

.good-detail {
    display: flex;
    align-items: center;
    width: 180px !important;

    .cover {
        flex-shrink: 0;
        flex-grow: 0;
        width: 60px;
        height: 60px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-right: 5px;
    }

    .detail {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        .title {
            font-size: 14px;
            color: rgba(51, 51, 51, 1);
            line-height: 20px;
            letter-spacing: 1px;
        }

        .no {
            font-size: 12px;
            font-weight: 400;
            color: rgba(96, 105, 114, 1);
            line-height: 17px;
            margin-top: 2px;
        }

        .type {
            font-size: 12px;
            font-weight: 400;
            color: rgba(96, 105, 114, 1);
            line-height: 17px;
            margin-top: 2px;
        }
    }
}

.empty-wrap {
    text-align: center;
    margin-top: 150px;
    flex: 1;

    .empty-img {
        width: 400px;
        height: 300px;
        margin: 0 auto;
        background-image: url(//cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .empty-text {
        text-align: center;
        margin-top: 40px;
    }
}

.btn-mr {
    margin-right: 20px;
}

.cursor-font {
    color: #409EFF;
    cursor: pointer;
}

.zd-dialog-tips {
    margin-top: 10px;
    color: #e4120b;
    margin-left: 10px;
}

.zd-dialog-foot {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.zd-order-cunt {
    padding-left: 10px;
    padding-bottom: 15px;
}

.zd-logsitaic {
    .el-icon-close {
        font-size: 23px;
        color: #C0CCDA;
        font-weight: 500;
        position: absolute;
        right: 20px;
        top: 0;
        cursor: pointer;
    }

    .logsitaic-title {
        color: #1F2D3D;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 24px;
    }

    .log-wrap {
        width: 100%;
        height: 70px;
        display: flex;
        margin-bottom: 27px;

        .log-wrap-cover {
            width: 70px;
            height: 70px;
            border-radius: 4px;
            margin-right: 16px;
        }

        .log-main {
            display: flex;
            color: #262626;
            font-size: 14px;
            flex-direction: column;
            padding-top: 8px;

            .log-main-company {
                height: 20px;
                margin-bottom: 2px;
            }

            .log-main-name {
                color: #262626;
                margin-left: 6px;
            }

            .el-icon-copy-document {
                color: #333333;
                font-size: 14px;
                cursor: pointer;
            }
        }

        .log-main:nth-child(1) {
            margin-top: 8px;
        }
    }
}

.zd-create {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-button {
        padding: 3px !important;
    }

    .el-button + .el-button {
        margin-left: 0px;
    }
}

.orderSelfMain {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    // nav
    .order_header {
        width: 100%;
        height: 44px;
        background: #F2F2F2;
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .order_nav {
            width: auto;
            height: 44px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .order_title {
                color: #333;
                font-size: 14px;
                font-weight: 500;
                box-sizing: border-box;
                white-space: nowrap;
                // border-left: 1px red solid;
            }
            .header0 {
                width: 472px;
            }
            .header1, .header2, .header6, .header7, .header8 {
                width: 180px;
            }
            .header5 {
                width: auto;
                flex: 1;
                max-width: 315px;
            }
            .header3, .header4 {
                width: 240px;
            }
        }
    }

    // table
    .order_self {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        // border: 1px red solid;
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .order_wrap {
            flex: 1;
            width: 100%;

            .order_list {
                background: #FBFBFB;
                border-radius: 2px;
                border: 1px #EEEEEE solid;
                // border-bottom: none;
                margin-top: 12px;
                // 订单信息
                .order_data {
                    width: calc(100% - 48px);
                    height: 44px;
                    margin-left: 24px;
                    margin-right: 24px;
                    box-sizing: border-box;
                    border-bottom: 1px #EEEEEE solid;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .order_info {
                        display: flex;
                        align-items: center;

                        .order_category {
                            padding: 0 8px;
                            height: 20px;
                            text-align: center;
                            line-height: 20px;
                            white-space: nowrap;
                            overflow: hidden;
                            color: #F2F2F2;
                            border-radius: 2px;
                            background: #FF8E39;
                            font-size: 12px;
                            margin-right: 4px;
                            &.from-type {
                                background: #FF3939;
                            }
                        }

                        .order_no {
                            color: #333;
                            font-size: 12px;
                        }

                        .order_time {
                            color: #333;
                            font-size: 12px;
                            margin-left: 32px;
                        }
                    }

                    .order_detail {
                        height: 26px;
                        cursor: pointer;
                        text-align: center;
                        line-height: 26px;
                        border-radius: 13px;
                        color: #333;
                        font-weight: 500;
                        font-size: 12px;
                        border: 1px #D7D7D7 solid;
                        margin-right: 24px;
                        box-sizing: border-box;
                        padding: 0 10px;
                    }

                    .border {
                        color: #20A0FF;
                        border: 1px #20A0FF solid;
                    }
                }

                //备注
                .order_remark {
                    width: calc(100% - 48px);
                    height: 44px;
                    margin-left: 24px;
                    margin-right: 24px;
                    box-sizing: border-box;
                    border-top: 1px #EEEEEE solid;
                    display: flex;
                    align-items: center;
                    color: #333;
                    font-size: 12px;
                    font-weight: 500;

                    & > p {
                        color: #333;
                        font-size: 12px;
                        font-weight: 400;
                        margin-left: 5px;
                    }
                }

                //内容
                .order_content {
                    display: flex;
                    align-items: center;
                    height: 100%;

                    .order_view {
                        margin: 16px 0;
                        display: flex;
                        align-items: center;
                        height: 100px;
                        box-sizing: border-box;
                        padding-left: 40px;
                        border-right: 1px #EEEEEE solid;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #333333;
                        font-weight: 500;
                        flex: 1;
                        padding: 0 40px;
                        box-sizing: border-box;
                        min-width: 141px;

                        .order_cloum {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            .order_cloum_name {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 120px;
                            }

                            .order_cloum_phone {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                margin-top: 10px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 120px;
                            }

                            .order_money {
                                color: #EE4E59;
                                font-size: 14px;
                                font-weight: 500;
                            }

                            .order_freight {
                                color: #333333;
                                font-size: 14px;
                                margin-top: 10px;
                            }

                            .order_cloumn_button {
                                width: 100px;
                                height: 30px;
                                color: #ffffff;
                                text-align: center;
                                line-height: 30px;
                                font-size: 12px;
                                margin-top: 12px;
                                cursor: pointer;
                                background: #20A0FF;
                                border-radius: 15px;
                            }
                        }

                        .order_cover {
                            width: 100px;
                            height: 100px;
                            margin-right: 10px;
                        }

                        .order_product {
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .order_title {
                                width: 198px;
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 20px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                margin-bottom: 19px;
                                white-space: normal;
                            }

                            .order_spec {
                                height: 16px;
                                width: 198px;
                                line-height: 16px;
                                color: #666;
                                font-size: 12px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }

                    .order_side {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        align-items: center;
                        border-right: 1px #EEEEEE solid;
                        height: 100%;
                        // padding: 0 40px;
                        .order_side_info_fatch {
                            width: 100%;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        }

                        .order_side_bottom {
                            border-bottom: 1px #EEEEEE solid;

                            .order_side_name {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                width: 150px;
                                line-height: 22px;
                                text-align: center;
                                overflow: hidden;
                            }

                            .order_side_phone {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                margin-top: 10px;
                            }
                        }

                        .order_side_info {
                            width: 100% !important;
                            display: flex;
                            height: 132px;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            border-bottom: 1px #EEEEEE solid;
                            font-weight: 500;
                            text-align: center;
                            line-height: 22px;
                            box-sizing: border-box;

                            .order_cover {
                                width: 100px;
                                height: 100px;
                                margin-right: 10px;
                            }

                            .order_product {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .order_title {
                                    width: 222px;
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 20px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    margin-bottom: 19px;
                                    white-space: normal;
                                    padding-right: 24px;
                                }

                                .order_spec {
                                    height: 16px;
                                    width: 222px;
                                    line-height: 16px;
                                    color: #666;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    padding-right: 24px;
                                }
                            }

                            .order_flex {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                margin-top: 10px;

                                .order_detail {
                                    height: 26px;
                                    cursor: pointer;
                                    text-align: center;
                                    line-height: 26px;
                                    border-radius: 13px;
                                    color: #333;
                                    font-weight: 500;
                                    font-size: 12px;
                                    box-sizing: border-box;
                                    padding: 0 22px;
                                    margin-bottom: 10px;
                                }

                                .border {
                                    color: #fff;
                                    background: #20A0FF;
                                }
                            }

                            /*订单状态样式*/
                            .order-status {
                                font-size: 14px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                            }
                            .order-status-0 {
                                color: #EE4E59;
                            }
                            .order-status-2, .order-status-3 {
                                color: #F79038;
                            }
                            .order-status-4 {
                                color: #2FBDB3;
                            }
                        }

                        .order-elispe {
                            width: 80%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .order_cloum {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            .order_cloumn_button {
                                width: 100px;
                                height: 30px;
                                color: #ffffff;
                                text-align: center;
                                line-height: 30px;
                                font-size: 12px;
                                margin-top: 12px;
                                cursor: pointer;
                                background: #20A0FF;
                                border-radius: 15px;
                            }
                        }

                        .order_side_info_fatch:last-child .order_side_info:last-child {
                            border-bottom: none;
                        }

                        .order_side_bottom:last-child {
                            border-bottom: none;
                        }
                    }

                    .no-padding {
                        padding: 0;
                    }
                }
            }
        }

        // }
    }
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>
<style lang="less">
.goods-container {
    .common-table {
        margin-top: 15px;
        border-bottom: 0;

        th {
            background: rgba(251, 251, 251, 1);
            padding: 10px 0;
        }

        td {
            padding: 7px 0;
        }
    }

    .is-scrolling-none {
        transform: translate3d(0, 0, 0);
    }

    .zd-logsitaic {
        .el-dialog__body {
            padding: 12px 46px 42px 46px;
            position: relative;
            max-height: 561px;
            overflow: hidden;
            overflow-y: auto;
        }

        .el-timeline-item__node--large {
            left: -6px;
            top: -1px;
            width: 22px;
            height: 22px;
        }

        .el-timeline-item__icon {
            position: relative;
            left: 1px;
        }

        .el-timeline-item__content {
            line-height: 22px;
        }
    }

    .order_side_info {
        .el-button {
            padding: 3px 0;
        }
    }
}
</style>
